<template>
  <view class="container">
    <scroll-view scroll-y>
      <view class="fee-summary-content">
        <ve-card
          class="fee-item"
          :class="{ 'fee-item-nochildren': !item.children }"
          v-for="(item, index) in sOrderOriginFeeSumInfo.feeList"
          :title="item.name"
          :key="index"
          type="none"
          :fold="item.children?.length ? true : false"
          v-model:initFold="item.childrenToggle"
        >
          <template #operator-left>
            <view class="fee-sum-value" :style="{ marginRight: item.children?.length ? '32rpx' : '0' }">{{ unitVal(item.value) }}</view>
          </template>
          <view class="fee-item-children" v-if="item.children?.length && item.childrenToggle">
            <ve-form-item
              v-for="(childItem, childIndex) in item.children"
              :key="childIndex"
              :label="childItem.name"
              :borderBottom="childIndex != item.children.length - 1"
              >{{ unitVal(childItem.value) }}</ve-form-item
            >
          </view>
        </ve-card>
      </view>
    </scroll-view>
    <view class="fee-summary-sum">
      <div class="fee-summary-amount">
        费用合计：<text class="amount">{{ sOrderOriginFeeSumInfo.sum }}</text
        ><text class="unit">元</text>
      </div>
    </view>
  </view>
</template>
<script setup>
  import { ref } from 'vue'
  import { unitVal } from '@/utils'
  import { onLoad } from '@dcloudio/uni-app'
  const sOrderOriginFeeSumInfo = ref(uni.getStorageSync('sOrderOriginFeeSumInfo'))

  onLoad((options) => {
    let title = options.title || '原费用信息'
    uni.setNavigationBarTitle({ title: title })
  })
</script>
<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    background: #f7f8fa;
  }
  .fee-summary-content {
    padding: 24rpx;
    padding-bottom: 160rpx;
  }
  .fee-sum-value {
    font-size: 32rpx;
    font-weight: 600;
    color: #191c27;
  }
  .fee-item {
    /deep/ .ve-card-content {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
  .fee-item-nochildren {
    /deep/ .ve-card-content,
    /deep/ .ve-card-header-border-line {
      display: none;
    }
  }
  .fee-summary-sum {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 52rpx 24rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    .fee-summary-amount {
      font-size: 32rpx;
      color: #1e1e1e;
      .amount {
        font-size: 48rpx;
        font-weight: 600;
        line-height: 1;
        color: #fe615a;
      }
      .unit {
        color: #fe615aff;
        font-size: 24rpx;
        vertical-align: bottom;
        margin-left: 8rpx;
      }
    }
  }
</style>
